<template>
  <div class="vip boxs">
    <div class="activities_list">
      <div class="table_paging container" style="min-height: 700px">
        <div class="card_content_wrapper">
          <div class="loadMoreList">
            <div
              class="activity_item"
              v-for="item in topicList"
              :key="item.id"
              :style="{ backgroundImage: 'url(' + item.cover + ')' }"
            >
              <!-- <img :src="item.cover" alt="" /> -->
              <router-link
                tag="a"
                target="_blank"
                :to="{ path: '/class/special', query: { id: item.id } }"
              >
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import router from '@/router';
import { ElLoading, ElMessage } from 'element-plus';

export default defineComponent({
  name: 'Subject',
});
</script>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { type ContentType, reqTopicList } from '@/api/class';

onMounted(async () => {
  try {
    ElLoading.service({ fullscreen: true });
 
    await getTopicList();
  
    ElLoading.service({ fullscreen: true }).close();
  } catch (err) {
    ElLoading.service({ fullscreen: true }).close();
    ElMessage.error(err);
  }
});
//获取主题列表ReqTopicList
const topicList = ref<ContentType[]>();
const pageSize = ref(16);
const getTopicList = async () => {
  const res = await reqTopicList(pageSize.value);
  topicList.value = res.content;
};
</script>

<style scoped lang="less">
.activities_list {
  display: flex;
  -webkit-box-pack: start;
  justify-content: flex-start;
  margin-top: 21px;
  .activity_item {
    flex-basis: 286px;
    height: 156.5px;
    flex-shrink: 0;
    -webkit-box-flex: 0;
    flex-grow: 0;
    // background-color: #cecece;
    cursor: pointer;
    background-size: cover;
    background-position: 50%;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 15px;
    width: 100%;
    float: left;
    box-sizing: border-box;
    a {
      display: block;
      width: 100%;
      height: 100%;
    }
  }
  .activity_item:not(:nth-child(4n)) {
    margin-right: 17.9px;
  }
}
.card_content_wrapper {
  margin-top: 20px;
  padding-bottom: 20px;
  .loadMoreList {
    display: flex;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    justify-content: flex-start;
    margin-left: auto;
    margin-right: auto;
  }
}
</style>
